<template>
  <div class="garden_container">
    <van-tabs v-model="active" animated class="tabs" @click="handleClick">
      <van-tab v-for="(item,index) in tablist" :title="item.name" :key="index">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item,index) in list" @click="details(item)" :key="index" :title="item.title" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>

import path from '@/network'
export default {
  name: 'App',
  data () {
    return {
      active: 0,
      total: 0,
      pagesize: 50,
      currentPage: 1,
      detailsId: '',
      list: [],
      tablist: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  mounted () {
    this.getSecondType(this.$route.query.firstId);
  },
  methods: {
    handleClick (tab) {
      this.detailsId = this.tablist[tab].id;
      console.log('detailsId', this.detailsId)
      this.getRulesList(this.detailsId)
    },
    //获取list
    getSecondType (id) {
      path.getSecondType(
        id
      ).then(res => {
        if (res.success === 0) {
          if (res.rows) {
            this.tablist = res.rows
            this.detailsId = res.rows[0].id
            this.getRulesList(this.detailsId)
          }
        }
      })
    },

    //获取list
    getRulesList (id) {
      path.getRulesList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.list = res.rows;
          // this.total = parseInt(res.total / this.pagesize);
        }

      })
    },
    details: function (item) {
      this.$router.push({ name: 'details', query: { secondId: item.id, type: 3,title:'详情' } })
    },

    onLoad () {
    },

    onRefresh () {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },






  }
}
</script>